<template>
	<view class="container">
		<!-- 通告栏 -->
		<uni-notice-bar align="center" v-if="searchData.shName==='测试'" single text="未识别到用户所属组别,仅展示测试数据"></uni-notice-bar>
		<!-- 筛选条件 -->
		<view class="example-body">
			<button class="select-button1" @click="showDrawer('showLeft')">筛选条件</button>
			<button class="select-button2" @click="refresh()">刷新</button>
			<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
			<!-- 选择商户 -->
			<uni-section title="商户" type="line">
				<uni-data-select v-model="searchData.shName" :localdata="tableShNameList" @change="changeShName" :clear="false"></uni-data-select>
			</uni-section>
			<!-- 选择款号 -->
			<uni-section title="款号" type="line">
				<uni-search-bar @confirm="refresh()" v-model="searchData.ddkh" @blur="refresh()" @cancel="searchData.ddkh='';refresh()" @clear="searchData.ddkh='';refresh()"></uni-search-bar>
			</uni-section>
			</uni-drawer>
		</view>
		<!-- 卡片瀑布流 -->
		<view class="cardList">
			<view class="cardCon" v-for='item in tableData'>
				<view class="imgCon" @click='toShowOrder(item.id)'>
					<image class="img" :src="staticSp + 'empty.jpg'"></image>
				</view>
				<view class="btmCon">
					<view class="textCon">
						{{item.ddkh}}款
					</view>
					<uni-icons size='36' color="#FF4500FF" type="cart" v-if="this.shopIdList.indexOf(item.id) < 0" class="iconCon"
						@click='addToShopList(item.id)'></uni-icons>
					<uni-icons size='36' color="#FF4500FF" type="cart-filled" v-else class="iconCon"
						@click='addToShopList(item.id)'></uni-icons>
				</view>
			</view>
		</view>
		<!-- 跳转 -->
		<view class="toAddOrder" @click="openAddOrder()">
			<uni-badge class="szjb" :text="this.shopIdList.length"/>
			<view class="text">下单</view>
		</view>
		
	</view>
</template>

<script>
	import config from "../../utils/config.js"
	export default {
		onLoad() {
			this.getShNameList();
		},
		data() {
			return {
				staticSp: config.staticSp,
				shopIdList: [],
				tableShNameList: ['测试'],
				tableData: [],
				searchData: {
					shName: '',
					shId: '',
					ddkh: '',
					spName: '',
					timeBeg: '',
					timeEnd: '',
					price: '',
					isOut: '',
					orderBy: '',
					djg: '',
					page: 1,
					pageSize: 10,
				}
			}
		},
		watch: {
			range(newval) {
				this.searchData.timeBeg = this.range[0]
				this.searchData.timeEnd = this.range[1]
				this.searchData.page = 1
				this.refresh()
			},
		},
		methods: {
			// 获取用户数组
			getShNameList() {
				if (uni.getStorageSync('userData')['storeUserArr'] === undefined) {
					this.tableShNameList = []
					this.searchData.shName = '测试'
				} else {
					this.tableShNameList = uni.getStorageSync('userData')['storeUserArr']
					this.searchData.shName = this.tableShNameList[0]['value']
				}
				this.refresh()
			},
			// 刷新数据
			refresh() {
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getKhBySearch",
					data: that.searchData
				}).then(res => {
					that.tableData = res.data
					that.shopIdList = []
				})
			},
			// 选择商户
			changeShName(e) {
				this.searchData.shId = e
				this.searchData.page = 1
				this.refresh()
			},
			// 加入购物车
			addToShopList(index) {
				let findFlag = false
				let side = 0
				for (let i = 0; i < this.shopIdList.length; i++) {
					if (this.shopIdList[i] === index) {
						findFlag = true
						side = i
						break
					}
				}
				if (findFlag === false) {
					this.shopIdList.push(index)
				} else {
					this.shopIdList.splice(side, 1)
				}
				console.log(this.shopIdList)
			},
			// 打开新增页面
			openAddOrder() {
				if (this.shopIdList.length === 0) {
					uni.showToast({
						title: '请先选择款号',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				} else {
					let arr = []
					for (let i = 0; i < this.shopIdList.length; i++) {
						let targetId = this.shopIdList[i]
						let target = {}
						for (let j = 0; j < this.tableData.length; j++) {
							if (targetId === this.tableData[j]['id']) {
								target = this.tableData[j]
								break
							}
						}
						arr.push(target)
					}
					let khFlag = true
					let ddkh = arr[0]['ddkh'].match(/\d+/g).join()
					for (let i = 0;i<arr.length;i++){
						if (arr[i]['ddkh'].match(/\d+/g).join() !== ddkh){
							khFlag = false
							break
						}
					}
					if (khFlag){
						uni.navigateTo({
							url: '/pages/kh/addOrder/addOrderTable?orderList=' + JSON.stringify(arr),
						})
					}else{
						uni.showToast({
							title: '请选择相同款号',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}

				}

			},
			// 打开商品详细页面
			toShowOrder(orderId) {
				uni.navigateTo({
					url: '/pages/kh/showOrder/showOrder?orderId=' + orderId
				})
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.container {
		.cardList {
			width: 750rpx;
			background-color: red;
			padding: 0px;

			.cardCon {
				float: left;
				width: 350rpx;
				margin-left: 15rpx;
				margin-top: 15rpx;
				background-color: #fff;
				border-radius: 30rpx;

				.imgCon {
					margin: 23rpx 23rpx 0 23rpx;
					border-radius: 5rpx;

					.img {
						border: 0;
						margin: 0;
						padding: 0;
						max-width: 300rpx;
						width: expression(this.width>150?"150rpx":this.width);
						max-height: 300rpx;
						height: expression(this.height>150?"150rpx":this.height);
					}
				}

				.btmCon {
					margin: 5rpx 25rpx 25rpx;
					height: 60rpx;

					.textCon {
						margin-top: 10rpx;
						height: 60rpx;
						font-size: 40rpx;
						float: left;
					}

					.iconCon {
						text-align: center;
						float: right;
						height: 60rpx;
						width: 60rpx;
						padding: 0;
						color: #FFF;
					}
				}
			}
		}
	}

	.addBtn {
		background-color: orangered;
	}
	
	.toAddOrder{
		position: fixed;
		z-index: 10;
		display: flex;
		bottom:50px;
		right:0;
		background-color: #e08020;
		border-radius: 50rpx 0 0 50rpx;
		
		.szjb{
			position: absolute;
			float: right;
			right:0;
		}
		.text{
			margin: 25rpx 0 25rpx 0 ;
			height: 50rpx;
			width: 200rpx;
			text-align: center;
			font-size: 40rpx;
			color:#eee;
		}
	}
	.select-button1{
		height: 100rpx;
		width: 78%;
		margin: 1%;
		right: 0;
		color: #eee;
		background-color: #e08020;
		float: left;
	}
	.select-button2{
		height: 100rpx;
		width: 18%;
		margin: 1%;
		right: 0;
		color: #eee;
		background-color: #e08020;
		float: left;
	}
</style>